/* ===================================================================== NIGHT MODE --------------------------------------------------------------------- Activated by setting (see darkmode.js). Every theming rule is scoped to that attribute, so the default light theme is left completely untouched. Contents: 1. Palette (CSS variables) 2. Base surfaces & text 3. Brand-red accents -> lightened red 4. Dark-navy text -> light 5. Header & navbar 6. Mobile / collapsed menu 7. Banner, panels & cards 8. Feedback panel, forms, footer, images 9. Theme-toggle button (shared by both themes) ===================================================================== */ /* 1. PALETTE ---------------------------------------------------------- */ :root { --dm-bg: #15191e; /* page background */ --dm-surface: #1d232b; /* cards / panels / header */ --dm-surface-2: #232b34; /* slightly raised surface */ --dm-text: #d4d8de; /* body text */ --dm-heading: #f1f3f5; /* headings */ --dm-muted: #9aa3ad; /* captions / secondary */ --dm-link: #e98b82; /* lightened brand red */ --dm-link-hover: #ffffff; /* link hover */ --dm-border: #333b45; /* borders / dividers */ } /* Smooth fade when switching themes */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .main-head, html[data-theme="dark"] .panel_data_mthd_col_inner { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* 2. BASE SURFACES & TEXT -------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-heading); } /* Hard-coded grey captions in WP body copy */ html[data-theme="dark"] [style*="color: #555"], html[data-theme="dark"] [style*="color:#555"] { color: var(--dm-muted) !important; } /* 3. BRAND-RED ACCENTS ----------------------------------------------- */ /* The theme paints many small accents in dark red (#75140c), which is invisible on a dark background. Every such selector is re-mapped to the lightened red so the accent survives. (Covers: nav active item, journal s and bold name in the bio, course-name h5s, tags, panel headings, active tabs, product links, etc.) */ html[data-theme="dark"] a, html[data-theme="dark"] .search_icoo_head_out i, html[data-theme="dark"] .welcome_banner_row_left_in p span, html[data-theme="dark"] .welcome_banner_row_left_in p span a, html[data-theme="dark"] .paragraph h5 em, html[data-theme="dark"] .paragraph h5 span, html[data-theme="dark"] .paragraph h5 strong, html[data-theme="dark"] .cmn_hdngg .cmn_hdngg_headd h2 span, html[data-theme="dark"] .section_rscr_rt_undr .tag_part li span, html[data-theme="dark"] .section_rscr_rt_undr h5 span span, html[data-theme="dark"] .vbtn_brd, html[data-theme="dark"] .panel_data_mthd_col_inner .hdng, html[data-theme="dark"] .tab_area_part_main .nav-tabs li a.active, html[data-theme="dark"] .tag_part_cmmmn li span, html[data-theme="dark"] .teaching-feedback h4, html[data-theme="dark"] .prd_lnk > a, html[data-theme="dark"] .rsc_paper_innnnner .rsc_paper_innnnner_hdngs h5, html[data-theme="dark"] .rsc_paper_innnnner .rsc_paper_innnnner_hdngs h4 span, html[data-theme="dark"] .navbar-nav > li.current-menu-item > a { color: var(--dm-link); } /* Inline style="color:#75140c" accents */ html[data-theme="dark"] [style*="#75140c"] { color: var(--dm-link) !important; } /* Link / button hover states (theme uses dark navy on hover) */ html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus, html[data-theme="dark"] .vbtn_brd:hover { color: var(--dm-link-hover); } /* 4. DARK-NAVY TEXT -------------------------------------------------- */ /* Selectors that hard-code navy (#001527 / #232b34) and so outrank the generic heading rule above. Headings go light; body copy goes grey. */ html[data-theme="dark"] .section_rscr_rt_undr h5, html[data-theme="dark"] .teachs_secc_innnr_undr h4, html[data-theme="dark"] .tab_area_part_main .nav-tabs li a, html[data-theme="dark"] .rsc_paper_innnnner .rsc_paper_innnnner_hdngs h3, html[data-theme="dark"] .rsc_paper_innnnner .rsc_paper_innnnner_hdngs h4 { color: var(--dm-heading); } html[data-theme="dark"] .welcome_banner_row_left_in p, html[data-theme="dark"] .section_rscr_rt_undr h5 span, html[data-theme="dark"] .breadcrumb_outtr .breadcrumb-item.active { color: var(--dm-text); } /* 5. HEADER & NAVBAR ------------------------------------------------- */ html[data-theme="dark"] .main-head { background: var(--dm-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } /* The visible white header background actually lives on these wrappers */ html[data-theme="dark"] .main-head-parent, html[data-theme="dark"] .main-head-top, html[data-theme="dark"] .main-head-botttom { background: var(--dm-surface); } html[data-theme="dark"] .navbar-nav > li > a, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: #f3f5f7; } html[data-theme="dark"] .navbar-nav > li > a:hover { color: var(--dm-link); } html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.4); } html[data-theme="dark"] .navbar-nav .clickD::before { border-color: var(--dm-link); } /* Dropdown sub-menus (white -> dark) */ html[data-theme="dark"] .sub-menu { background: var(--dm-surface-2); border: 1px solid var(--dm-border); } html[data-theme="dark"] .sub-menu > li > a { color: var(--dm-text); } html[data-theme="dark"] .sub-menu > li.menu-item-has-children:hover > a, html[data-theme="dark"] .sub-menu > li > a:hover { background: #75140c; color: #fff; } /* 6. MOBILE / COLLAPSED MENU ----------------------------------------- */ /* The off-canvas menu and its slide-down panel are white by default. */ html[data-theme="dark"] .navbar-collapse, html[data-theme="dark"] .main-head-top .navbar-collapse, html[data-theme="dark"] .navbar-collapse.show, html[data-theme="dark"] .mobile_hd_hd { background: var(--dm-surface); } /* The mobile "close" (X) button is hard-coded navy with !important */ html[data-theme="dark"] .mobile-menu-close.mobileMenuClose { color: var(--dm-text) !important; } /* 7. BANNER, PANELS & CARDS ------------------------------------------ */ html[data-theme="dark"] .welcome_banner, html[data-theme="dark"] .welcome_banner_row_left_in { background: transparent; } /* White / cream cards -> dark surface */ html[data-theme="dark"] .panel_data_mthd_col_inner, html[data-theme="dark"] .teachs_secc_innnr_undr { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .teachs_secc_innnr_undr { box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.45); } /* Bordered panels + section dividers -> dark border */ html[data-theme="dark"] .section_rscr_rt_undr, html[data-theme="dark"] .rsc_paper_innnnner, html[data-theme="dark"] .cmn-gap-border-inner { border-color: var(--dm-border) !important; } html[data-theme="dark"] hr { border-color: var(--dm-border); } /* 8. FEEDBACK PANEL, FORMS, FOOTER, IMAGES --------------------------- */ /* Selected Student Feedback: cream blockquotes -> dark */ html[data-theme="dark"] .teaching-feedback { border-top-color: var(--dm-border); } html[data-theme="dark"] .teaching-feedback blockquote { background: var(--dm-surface); color: var(--dm-text); border-left-color: var(--dm-link); } /* Form controls */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] input::placeholder { color: var(--dm-muted); } /* Footer (already dark; align to palette) */ html[data-theme="dark"] .main_footer_top { background-color: var(--dm-bg); border-top: 1px solid var(--dm-border); } /* Soften bright photos so they don't glare */ html[data-theme="dark"] .welcome_banner_row_left_in .main_img img { filter: brightness(0.92) contrast(1.02); } /* ===================================================================== 9. THEME-TOGGLE BUTTON (shared styling, visible in both themes) ===================================================================== */ /* Scoped under .theme-toggle-item so it outranks the theme's global button[type="button"] rule (a 150px-wide uppercase pill). */ .theme-toggle-item .theme-toggle { background: #75140c; /* red chip behind the icon */ border: 0; cursor: pointer; min-width: 0; /* cancel the theme's 150px min-width */ width: 32px; /* equal width + height = a true square */ height: 32px; padding: 0; border-radius: 6px; line-height: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; /* icon color */ transition: background 0.2s ease, transform 0.2s ease; } .theme-toggle-item .theme-toggle:hover { background: #5e0f08; /* stay red on hover, slightly darker */ transform: scale(1.08); } .theme-toggle-item .theme-toggle svg { width: 18px; height: 18px; display: block; } html[data-theme="dark"] .theme-toggle-item .theme-toggle { background: var(--dm-link); color: #15191e; } /* Swap moon / sun glyph for the active theme */ .theme-toggle .icon-moon { display: inline-flex; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; } /* Keep the toggle compact in the menu */ #menu-header-menu .theme-toggle-item { display: inline-flex; align-items: center; } /* Desktop bar (flex row): vertically center items so the square toggle lines up with the text links. */ @media (min-width: 992px) { #menu-header-menu { align-items: center; } } /* Mobile off-canvas menu (vertical list): left-align the toggle like the text links instead of letting the inline-flex chip float. */ @media (max-width: 991px) { #menu-header-menu .theme-toggle-item { display: flex; justify-content: flex-start; margin-top: 4px; } } /* Phones: the menu links get a 6px 10px padding, so their text is indented 10px. Indent the toggle to match so left edges line up. */ @media (max-width: 767px) { #menu-header-menu .theme-toggle-item { padding-left: 10px; } }